<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编写一个三维立方体</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script type="module" src="./index.js"></script>
  <script id="vs" type="notjs">
    attribute vec4 position;
    attribute vec2 texcoord;

    uniform mat4 u_matrix;

    varying vec2 v_texcoord;

    void main() {
      gl_Position = u_matrix * position;

      v_texcoord = texcoord;
    }
  </script>
  <script id="fs" type="notjs">
    precision mediump float;
    varying vec2 v_texcoord;

    uniform sampler2D u_texture;

    void main() {
       gl_FragColor = texture2D(u_texture, v_texcoord);
    }
  </script>
</html>
